<template>
  <div class="body">
    <div class="body_left">
      <div class="body_left_header">
        <div
          class="half"
          :class="
            leftActiveType === item.type
              ? 'half-active'
              : ''
          "
          v-for="item in typeList"
          :key="item.type"
          @click="typeClick(item)"
        >
          <div style="display: inline-block">
            <Icon
              :name="item.icon"
              :color="
                leftActiveType === item.type
                  ? '#497FA3'
                  : '#4c565c'
              "
              font-size="20"
            />
          </div>
          <!-- <span class="iconfont shujumulu"></span> -->
          <span>{{ item.name }}</span>
        </div>
      </div>

      <div
        class="body_tree"
        v-show="Number(leftActiveType) === 1"
      >
        <el-tree
          v-if="treeData.length > 0"
          ref="tree"
          :default-expand-all="true"
          :data="treeData"
          :props="defaultProps"
          :filter-node-method="filterNode"
          :expand-on-click-node="false"
          node-key="pkid"
          highlight-current
          :current-node-key="treeActiveId"
          draggable
          @node-drop="handleDrop"
          :allow-drop="allowDrop"
          :allow-drag="allowDrag"
        >
          <template slot-scope="{ node, data }">
            <div
              style="width: 100%; line-height: 36px"
              @click="onClick(data)"
            >
              <div
                style="
                  display: inline-block;
                  vertical-align: middle;
                  margin-right: 6px;
                "
              >
                <icon
                  :title="'文件夹'"
                  :name="'wenjianjia'"
                  font-size="16"
                  :color="
                    data.serviceInfos &&
                    data.serviceInfos.length > 0
                      ? '#0098ff'
                      : ''
                  "
                />
              </div>
              <div
                style="
                  display: inline-block;
                  width: 50%;
                  vertical-align: middle;
                "
              >
                {{ data.name }}
              </div>
              <!-- v-show="Number(data.parentId) !== -1" -->
              <div
                style="
                  width: 40%;
                  display: inline-block;
                  line-height: 36px;
                  height: 36px;
                  vertical-align: middle;
                "
              >
                <i
                  @click.stop="deleteTree(data.pkid)"
                  v-has="'catalogueManagement:delete'"
                  class="el-icon-delete"
                  style="
                    font-size: 16px;
                    float: right;
                    margin-right: 20px;
                    color: #ff5b5b;
                    line-height: 36px;
                  "
                ></i>
                <i
                  @click.stop="editTree(data)"
                  v-has="'catalogueManagement:edit'"
                  class="el-icon-edit-outline"
                  style="
                    font-size: 16px;
                    float: right;
                    margin-right: 10px;
                    color: #00baff;
                    line-height: 36px;
                  "
                ></i>
                <i
                  @click.stop="addTree(data)"
                  v-has="'catalogueManagement:add'"
                  class="el-icon-circle-plus-outline"
                  style="
                    font-size: 16px;
                    float: right;
                    margin-right: 10px;
                    color: #00baff;
                    line-height: 36px;
                  "
                ></i>
              </div>
            </div>
          </template>
        </el-tree>
        <div
          v-else
          style="display: flex; justify-content: center"
        >
          <i
            @click="addEmptyTree"
            class="el-icon-circle-plus-outline"
            style="
              cursor: pointer;
              font-size: 16px;
              color: #00baff;
              line-height: 36px;
            "
          ></i>
        </div>
      </div>
      <div
        class="body_tree"
        v-show="Number(leftActiveType) === 2"
      >
        <div
          class="topic-item"
          @click="topicClick(item)"
          :class="
            activeTopicId === item.id
              ? 'topic-item-active'
              : ''
          "
          v-for="item in topicList"
          :key="item.id"
        >
          {{ item.label }}
        </div>
      </div>
    </div>
    <div class="body_right">
      <div
        class="half"
        v-show="Number(leftActiveType) === 2"
      >
        <div class="half-title">数据目录</div>
        <!-- <div class="half-title"><el-input prefix-icon="el-icon-search" placeholder="输入关键字进行过滤" v-model="filterText"></el-input></div> -->
        <div class="half-body">
          <el-tree
            ref="layerTreeData"
            :data="treeDataTopic"
            node-key="pkid"
            :props="defaultPropsTopic"
            default-expand-all
            :filter-node-method="filterNode"
            :expand-on-click-node="false"
            draggable
            @node-drop="handleDrop"
            :allow-drop="allowDrop"
            :allow-drag="allowDrag"
            @node-drag-start="handleDragstart"
            @node-drag-end="handleDragend"
          >
            <!-- show-checkbox  @check="handleCheck" :default-checked-keys="topicChecked" @dblclick="onClickAddData(data)"-->
            <div
              slot-scope="{ node, data }"
              style="display: flex"
            >
              <icon
                v-if="data.name"
                :title="'文件夹'"
                :name="folderIcon(data)"
              />
              <icon
                v-if="data.sourceName"
                :title="'数据服务'"
                :name="'shujufuwu'"
                :color="data.isCheck ? '#0098ff' : ''"
              />
              <span
                v-if="data.sourceName"
                class="margin"
                :style="{
                  color: data.isCheck ? '#0098ff' : ''
                }"
                >{{ data.sourceName }}</span
              >
              <!-- @click="handleCheck" -->
              <span v-if="data.name" class="margin">{{
                data.name
              }}</span>
            </div>
          </el-tree>
        </div>
      </div>
      <div
        class="half"
        v-show="Number(leftActiveType) === 2"
        style="width: 40%"
      >
        <div class="half-title">专题服务目录</div>
        <div class="half-body">
          <el-tree
            v-if="treeDataRight.length"
            ref="layerTreeRight"
            :data="treeDataRight"
            node-key="pkid"
            :props="defaultPropsTopic"
            default-expand-all
            :filter-node-method="filterNode"
            :current-node-key="activeTopicTree.pkid"
            :expand-on-click-node="false"
            draggable
            @node-drop="handleDrop"
            :allow-drop="allowDropRight"
            :allow-drag="allowDrag"
          >
            <!-- @node-drop="handleDrop"
            :allow-drop="allowDrop"
            :allow-drag="allowDrag" -->
            <template slot-scope="{ node, data }">
              <div
                style="width: 100%; line-height: 36px"
                @click="onClickTopic(data)"
              >
                <!-- @click="onClick(data)" -->
                <div
                  style="
                    display: inline-block;
                    vertical-align: middle;
                    margin-right: 6px;
                  "
                >
                  <icon
                    v-show="data.catalogName"
                    :title="'文件夹'"
                    :name="'wenjianjia'"
                    font-size="16"
                  />
                  <icon
                    v-show="data.sourceName"
                    :title="'数据服务'"
                    :name="'shujufuwu'"
                  />
                </div>
                <div
                  v-show="data.catalogName"
                  style="
                    display: inline-block;
                    width: 50%;
                    vertical-align: middle;
                  "
                >
                  {{ data.catalogName }}
                </div>
                <div
                  v-show="data.sourceName"
                  style="
                    display: inline-block;
                    width: 50%;
                    vertical-align: middle;
                  "
                >
                  {{ data.sourceName }}
                </div>
                <div
                  v-show="
                    data.catalogName &&
                    !(
                      activeTopicId ===
                        'shengzhangdongtai' &&
                      treeDataRight.length >= 3
                    )
                  "
                  style="
                    width: 40%;
                    display: inline-block;
                    line-height: 36px;
                    height: 36px;
                    vertical-align: middle;
                  "
                >
                  <i
                    @click.stop="deleteTree(data.pkid)"
                    v-has="'catalogueManagement:delete'"
                    class="el-icon-delete"
                    style="
                      font-size: 16px;
                      float: right;
                      margin-right: 20px;
                      color: #ff5b5b;
                      line-height: 36px;
                    "
                  ></i>
                  <!-- v-show="!(activeTopicId=='shengzhangdongtai'&&treeDataRight.length==3)" -->
                  <i
                    @click.stop="editTreeTopic(data)"
                    v-has="'catalogueManagement:edit'"
                    class="el-icon-edit-outline"
                    style="
                      font-size: 16px;
                      float: right;
                      margin-right: 10px;
                      color: #00baff;
                      line-height: 36px;
                    "
                  ></i>
                  <i
                    @click.stop="addTreeTopic(data)"
                    v-has="'catalogueManagement:add'"
                    class="el-icon-circle-plus-outline"
                    style="
                      font-size: 16px;
                      float: right;
                      margin-right: 10px;
                      color: #00baff;
                      line-height: 36px;
                    "
                  ></i>
                </div>
                <div
                  v-show="data.sourceName"
                  style="
                    width: 40%;
                    display: inline-block;
                    line-height: 36px;
                    height: 36px;
                    vertical-align: middle;
                  "
                >
                  <i
                    @click.stop="deleteTreeSource(data)"
                    v-has="'catalogueManagement:delete'"
                    class="el-icon-delete"
                    style="
                      font-size: 16px;
                      float: right;
                      margin-right: 20px;
                      color: #ff5b5b;
                      line-height: 36px;
                    "
                  ></i>
                  <el-switch
                    v-model="data.isDefault"
                    @change="defaulfChange(data)"
                    style="
                      float: right;
                      margin-top: 8px;
                      margin-right: 6px;
                    "
                  >
                  </el-switch>
                </div>
              </div>
            </template>
          </el-tree>
          <div
            v-else
            style="display: flex; justify-content: center"
          >
            <i
              @click="addEmptyTree"
              class="el-icon-circle-plus-outline"
              style="
                cursor: pointer;
                font-size: 16px;
                color: #00baff;
                line-height: 36px;
              "
            ></i>
          </div>
        </div>
      </div>
      <div
        class="half"
        v-show="Number(leftActiveType) === 2"
      >
        <div class="half-title">默认展示数据</div>
        <div class="half-body">
          <el-table
            v-if="Number(leftActiveType) === 2"
            :data="defaultList"
            :header-cell-style="{
              background: '#F2F6FB ',
              color: ' #6B767D'
            }"
            height="60%"
            ref="table"
          >
            <el-table-column
              label="序号"
              align="center"
              show-overflow-tooltip
              width="80"
            >
              <template slot-scope="scope">
                {{ scope.$index + 1 }}
              </template>
            </el-table-column>
            <el-table-column
              prop="sourceName"
              label="数据名称"
              show-overflow-tooltip
            />
          </el-table>
          <div class="half-title">默认底图</div>
          <div class="select">
            <div
              class="radio"
              v-for="val in baseMapList"
              :key="val.pkid"
            >
              <div class="label">{{ val.name }}</div>
              <el-switch
                :value="selectBaseMap === val.pkid"
                @change="
                  handleBaseMapChange($event, val.pkid)
                "
              >
              </el-switch>
            </div>
          </div>
        </div>
      </div>
      <div
        class="body_right_header"
        v-if="Number(leftActiveType) === 1"
      >
        <el-button
          @click="mountServe"
          v-has="'catalogueManagement:serveAdd'"
        >
          <div style="display: inline-block">
            <Icon
              name="guazai"
              color="#FFFFFF"
              font-size="14"
            />
          </div>
          <span style="margin-left: 4px">挂载服务</span>
        </el-button>
        <!-- <div class="header_right">
          <el-input
            placeholder="请输入数据名称"
            v-model="parameter.serviceName"
            clearable
            style="width: 228px"
            @input="search"
          >
            <div slot="suffix">
              <Icon
                title="搜索"
                name="sousuo"
                color="#A7ADB5"
                font-size="20"
              />
            </div>
          </el-input>
          <el-select
            placeholder="请选择服务类型"
            v-model="parameter.serviceType"
            @change="search"
            clearable
          >
            <el-option
              v-for="(item, index) in serveTypeList"
              :key="index"
              :label="item.value"
              :value="item.key"
            ></el-option>
          </el-select>
          <el-select
            placeholder="请选择图表状态"
            v-model="parameter.showChart"
            @change="search"
            clearable
          >
            <el-option value="0" label="不显示"></el-option>
            <el-option value="1" label="显示"></el-option>
          </el-select>
        </div> -->
      </div>
      <el-table
        v-if="Number(leftActiveType) === 1"
        :data="serveList"
        :header-cell-style="{
          background: '#F2F6FB ',
          color: ' #6B767D'
        }"
        height="704px"
        ref="table"
        :row-class-name="tableRowClassName"
        row-key="pkid"
      >
        <el-table-column
          label="序号"
          align="center"
          show-overflow-tooltip
          width="80"
        >
          <template slot-scope="scope">
            {{ scope.$index + 1 }}
          </template>
        </el-table-column>
        <el-table-column
          prop="serviceName"
          label="服务名称"
          show-overflow-tooltip
        />
        <el-table-column
          prop="serviceType"
          label="服务类型"
          show-overflow-tooltip
          width="200"
        >
          <template slot-scope="scope">
            <span>{{
              getValueByKey(scope.row.serviceType)
            }}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="serviceUrl"
          label="服务地址"
          show-overflow-tooltip
        />
        <el-table-column
          prop="dataUrl"
          label="数据地址"
          show-overflow-tooltip
        />
        <el-table-column
          prop="createTime"
          label="挂载时间"
          show-overflow-tooltip
        />
        <el-table-column min-width="130" label="操作">
          <template slot-scope="scope">
            <el-button
              type="text"
              @click="updateServe(scope.row)"
              style="color: #00baff; font-weight: 400"
              v-has="'catalogueManagement:serveEdit'"
              >编辑
            </el-button>
            <el-button
              type="text"
              @click="doDeleteServe(scope.row)"
              style="color: #ff5b5b; font-weight: 400"
              v-has="'catalogueManagement:serveDelete'"
              >删除
            </el-button>
            <i
              v-if="scope.row.index !== 0"
              @click.stop="moveSort(scope.row, -1)"
              v-has="'catalogueManagement:edit'"
              class="el-icon-top"
              title="向上移动"
              style="
                font-size: 16px;
                float: right;
                margin-right: 10px;
                color: #00baff;
                line-height: 36px;
                cursor: pointer;
              "
            ></i>
            <i
              v-if="
                scope.row.index !== serveList.length - 1
              "
              @click.stop="moveSort(scope.row, 1)"
              v-has="'catalogueManagement:edit'"
              class="el-icon-bottom"
              title="向下移动"
              style="
                font-size: 16px;
                float: right;
                margin-right: 10px;
                color: #00baff;
                line-height: 36px;
                cursor: pointer;
              "
            ></i>
          </template>
        </el-table-column>
      </el-table>
      <div
        v-show="Number(leftActiveType) === 1"
        style="float: right; margin-top: 15px"
        v-if="total"
      >
        <el-pagination
          background
          layout="prev, pager, next"
          :page-size="parameter.pageSize"
          @current-change="pageChange"
          :total="total"
        >
        </el-pagination>
      </div>
    </div>

    <el-dialog
      :visible.sync="dialogVisibleTree"
      :title="headerTreeTitle"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      width="600px"
    >
      <el-form
        :model="treeForm"
        :rules="treeRules"
        v-if="dialogVisibleTree"
        label-width="100px"
        label-position="left"
        ref="ruleForm"
      >
        <el-form-item
          label="当前目录节点"
          v-if="headerTreeTitle !== '编辑目录'"
        >
          <el-cascader
            disabled
            placeholder="选择目录"
            style="width: 100%"
            clearable
            v-model="treeForm.parentId"
            :options="deptTrees"
            :props="{
              value: 'pkid',
              label: 'name',
              children: 'children',
              checkStrictly: true
            }"
          />
        </el-form-item>
        <el-form-item
          label="目录层级"
          prop="pidType"
          v-if="headerTreeTitle !== '编辑目录'"
        >
          <el-select
            v-model="treeForm.pidType"
            style="width: 100%"
            :disabled="
              activeTopicId === 'shengzhangdongtai'
            "
          >
            <el-option
              label="子目录"
              :value="0"
            ></el-option>
            <el-option
              label="同级目录"
              :value="1"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="目录名称" prop="catalogName">
          <el-input v-model="treeForm.catalogName" />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button
          @click="dialogVisibleTree = false"
          class="update"
          >取消
        </el-button>
        <el-button
          type="primary"
          @click="onSubmit('ruleForm')"
          >确定
        </el-button>
      </template>
    </el-dialog>

    <!-- 空目录时添加目录 -->
    <el-dialog
      :visible.sync="emptyDialogVisibleTree"
      :title="headerTreeTitle"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      width="600px"
    >
      <el-form
        :model="emptyTreeForm"
        :rules="emptyTreeRules"
        v-if="emptyDialogVisibleTree"
        label-width="100px"
        label-position="left"
        ref="emptyRuleForm"
      >
        <el-form-item label="目录名称" prop="catalogName">
          <el-input v-model="emptyTreeForm.name" />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button
          @click="emptyDialogVisibleTree = false"
          class="update"
          >取消
        </el-button>
        <el-button
          type="primary"
          @click="onSubmit('emptyRuleForm')"
          >确定
        </el-button>
      </template>
    </el-dialog>

    <el-dialog
      :visible.sync="dialogVisibleServe"
      :title="headerServeTitle"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      width="600px"
      @close="dialogClosed"
      style="margin-top: -100px; overflow-y: hidden"
    >
      <div class="configType-title">
        <div
          @click="configClickHandleType(item)"
          v-for="(item, index) in toolData"
          :key="index"
          :class="{
            'is-active': activeTool === item.value
          }"
        >
          {{ item.label }}
          <p class="line"></p>
        </div>
      </div>
      <el-form
        :model="serveForm"
        :rules="serveRules"
        v-if="dialogVisibleServe"
        label-width="110px"
        label-position="left"
        ref="ruleFormServe"
      >
        <div v-show="activeTool === 'serve'">
          <el-form-item label="目录节点" prop="catalogName">
            <el-input
              disabled
              v-model="serveForm.catalogName"
            />
          </el-form-item>
          <el-form-item label="数据名称" prop="sourceName">
            <el-input v-model="serveForm.sourceName" />
          </el-form-item>
          <el-form-item label="服务类型" prop="serviceType">
            <el-select
              placeholder="请选择"
              v-model="serveForm.serviceType"
              style="width: 100%"
              @change="onServiceTypeChange"
            >
              <el-option
                v-for="(item, index) in serveTypeList"
                :key="index"
                :label="item.value"
                :value="item.key"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item
            label="图层地址"
            prop="serviceUrl"
            v-if="serveForm.serviceType !== '27'"
          >
            <el-input v-model="serveForm.serviceUrl" />
          </el-form-item>
          <el-form-item label="图例地址" prop="signService">
            <el-input v-model="serveForm.signService" />
          </el-form-item>
          <el-form-item
            label="BIM类型"
            prop="bimType"
            v-if="serveForm.serviceType === '27'"
          >
            <el-select
              placeholder="请选择"
              v-model="serveForm.bimType"
              style="width: 100%"
            >
              <el-option
                v-for="item in bimTypeList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-tabs
            v-model="bimServeTabName"
            v-if="serveForm.serviceType === '27'"
          >
            <el-tab-pane label="BIM0" name="bim0">
              <el-form-item
                label="图层地址"
                prop="bim0.serviceUrl"
              >
                <el-input
                  v-model="serveForm.bim0.serviceUrl"
                  @change="onServiceUrlChange(0)"
                />
              </el-form-item>
              <el-form-item
                label="数据地址"
                prop="bim0.dataService"
              >
                <el-input
                  v-model="serveForm.bim0.dataService"
                  @change="onDateServiceUrlChange(0)"
                  @blur="getBimDataFields"
                />
              </el-form-item>
              <el-form-item
                label="数据编码字段"
                prop="bim0.bimCode"
              >
                <el-select
                  v-model="serveForm.bim0.bimCode"
                  style="width: 100%"
                  clearable
                  filterable
                >
                  <el-option
                    v-for="item in serveForm.bim0
                      .bimDataFields"
                    :key="item.field"
                    :label="item.caption"
                    :value="item.field"
                  />
                </el-select>
              </el-form-item>
            </el-tab-pane>
            <el-tab-pane label="BIM1" name="bim1">
              <el-form-item
                label="图层地址"
                prop="bim1.serviceUrl"
              >
                <el-input
                  v-model="serveForm.bim1.serviceUrl"
                  @change="onServiceUrlChange(1)"
                />
              </el-form-item>
              <el-form-item
                label="数据地址"
                prop="bim1.dataService"
              >
                <el-input
                  v-model="serveForm.bim1.dataService"
                  @change="onDateServiceUrlChange(1)"
                  @blur="getBimDataFields"
                />
              </el-form-item>
              <el-form-item
                label="数据编码字段"
                prop="bim1.bimCode"
              >
                <el-select
                  v-model="serveForm.bim1.bimCode"
                  style="width: 100%"
                  clearable
                  filterable
                >
                  <el-option
                    v-for="item in serveForm.bim1
                      .bimDataFields"
                    :key="item.field"
                    :label="item.caption"
                    :value="item.field"
                  />
                </el-select>
              </el-form-item>
            </el-tab-pane>
            <el-tab-pane label="BIM2" name="bim2">
              <el-form-item
                label="图层地址"
                prop="bim2.serviceUrl"
              >
                <el-input
                  v-model="serveForm.bim2.serviceUrl"
                  @change="onServiceUrlChange(2)"
                />
              </el-form-item>
              <el-form-item
                label="数据地址"
                prop="bim2.dataService"
              >
                <el-input
                  v-model="serveForm.bim2.dataService"
                  @change="onDateServiceUrlChange(2)"
                  @blur="getBimDataFields"
                />
              </el-form-item>
              <el-form-item
                label="数据编码字段"
                prop="bim2.bimCode"
              >
                <el-select
                  v-model="serveForm.bim2.bimCode"
                  style="width: 100%"
                  clearable
                  filterable
                >
                  <el-option
                    v-for="item in serveForm.bim2
                      .bimDataFields"
                    :key="item.field"
                    :label="item.caption"
                    :value="item.field"
                  />
                </el-select>
              </el-form-item>
            </el-tab-pane>
            <el-tab-pane label="BIM3" name="bim3">
              <el-form-item
                label="图层地址"
                prop="bim3.serviceUrl"
              >
                <el-input
                  v-model="serveForm.bim3.serviceUrl"
                  @change="onServiceUrlChange(3)"
                />
              </el-form-item>
              <el-form-item
                label="数据地址"
                prop="bim3.dataService"
              >
                <el-input
                  v-model="serveForm.bim3.dataService"
                  @change="onDateServiceUrlChange(3)"
                  @blur="getBimDataFields"
                />
              </el-form-item>
              <el-form-item
                label="数据编码字段"
                prop="bim3.bimCode"
              >
                <el-select
                  v-model="serveForm.bim3.bimCode"
                  style="width: 100%"
                  clearable
                  filterable
                >
                  <el-option
                    v-for="item in serveForm.bim3
                      .bimDataFields"
                    :key="item.field"
                    :label="item.caption"
                    :value="item.field"
                  />
                </el-select>
              </el-form-item>
            </el-tab-pane>
          </el-tabs>
          <div
            class="dialog-line"
            v-if="serveForm.serviceType !== '27'"
          ></div>
          <el-form-item
            label="专题类型"
            prop="specialType"
            v-if="serveForm.serviceType !== '27'"
          >
            <el-select
              placeholder="请选择"
              v-model="serveForm.specialType"
              style="width: 100%"
              @change="specialTypeChange"
            >
              <el-option
                v-for="item in specialTypeList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item
            label="专题字段"
            prop="specialWord"
            v-if="
              serveForm.serviceType !== '27' &&
              (serveForm.specialType === 1 ||
                serveForm.specialType === 2)
            "
          >
            <el-select
              v-model="serveForm.specialWord"
              style="width: 100%"
              @visible-change="getSpecialFields(val)"
              clearable
            >
              <el-option
                v-for="item in specialWordOption"
                :key="item.field"
                :label="item.caption"
                :value="item.field"
              />
            </el-select>
          </el-form-item>
          <div
            class="dialog-line"
            v-if="serveForm.serviceType !== '27'"
          ></div>
          <span
            v-if="
              serveForm.serviceType &&
              serveForm.serviceType !== '27'
            "
            >数据服务</span
          >
          <el-tabs
            v-if="
              serveForm.serviceType &&
              serveForm.serviceType !== '27'
            "
            v-model="editableTabsValue"
            editable
            @edit="handleTabsEdit"
            @tab-click="handleTabClick"
            :style="{
              marginBottom: dataServiceList.length
                ? '0px'
                : '25px'
            }"
          >
            <el-tab-pane
              :key="item.name"
              v-for="item in editableTabs"
              :label="item.title"
              :name="item.name"
            >
            </el-tab-pane>
          </el-tabs>
          <el-form-item
            label="数据名称"
            v-if="
              serveForm.serviceType &&
              serveForm.serviceType !== '27' &&
              dataServiceList.length
            "
          >
            <el-input
              v-model="dataServiceList[tabActive].name"
              clearable
            />
          </el-form-item>
          <el-form-item
            label="数据地址"
            v-if="
              serveForm.serviceType &&
              serveForm.serviceType !== '27' &&
              dataServiceList.length
            "
          >
            <el-input
              v-model="dataServiceList[tabActive].url"
              clearable
            />
          </el-form-item>
          <el-form-item
            label="默认统计服务"
            v-if="
              serveForm.serviceType &&
              serveForm.serviceType !== '27' &&
              dataServiceList.length
            "
          >
            <el-switch
              v-model="dataServiceList[tabActive].isDefault"
              @change="multipleDataServiceDefaultChange"
            />
          </el-form-item>
        </div>
        <div v-show="activeTool === 'chart'">
          <el-form-item
            label="统计图表"
            prop="showChart"
            v-if="serveForm.serviceType !== '27'"
          >
            <el-radio-group
              v-model="serveForm.showChart"
              @change="showChartChange"
            >
              <el-radio :label="1">显示</el-radio>
              <el-radio :label="0">不显示</el-radio>
            </el-radio-group>
          </el-form-item>
          <div v-else>
            <div
              style="text-align: center; margin-top: 300px"
            >
              <Icon
                name="gantanhao"
                color="#FFFFFF"
                font-size="50"
              />
              BIM服务暂无图表配置！
            </div>
          </div>
          <el-form-item
            label="统计指标"
            prop="aggFields"
            v-if="
              serveForm.showChart &&
              serveForm.serviceType !== '27'
            "
          >
            <el-select
              v-model="serveForm.aggFields"
              multiple
              style="width: 100%"
              clearable
            >
              <el-option
                v-for="item in optionAll.fields"
                :key="item.field"
                :label="item.caption"
                :value="item.field"
              />
            </el-select>
          </el-form-item>
          <el-form-item
            label="分类字段"
            prop="groupFields"
            v-if="
              serveForm.showChart &&
              serveForm.serviceType !== '27'
            "
          >
            <el-select
              v-model="serveForm.groupFields"
              multiple
              style="width: 100%"
              clearable
            >
              <el-option
                v-for="item in optionAll.fieldsList"
                :key="item.field"
                :label="item.caption"
                :value="item.field"
              />
            </el-select>
          </el-form-item>
          <el-form-item
            label="统计方式"
            prop="types"
            v-if="
              serveForm.showChart &&
              serveForm.serviceType !== '27'
            "
          >
            <el-select
              v-model="serveForm.types"
              multiple
              style="width: 100%"
            >
              <el-option
                v-for="item in optionAll.four"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item
            label="统计范围"
            prop="range"
            v-if="
              serveForm.showChart &&
              serveForm.serviceType !== '27'
            "
          >
            <el-checkbox-group v-model="serveForm.range">
              <el-checkbox label="区域"></el-checkbox>
              <el-checkbox label="自定义"></el-checkbox>
            </el-checkbox-group>
          </el-form-item>
        </div>
      </el-form>
      <template #footer>
        <el-button
          @click="dialogVisibleServe = false"
          class="update"
          >取消
        </el-button>
        <el-button
          type="primary"
          @click="onSubmitServe('ruleFormServe')"
          >确定
        </el-button>
      </template>
    </el-dialog>

    <el-dialog
      :visible.sync="dialogVisibleDataServe"
      :title="headerTreeTitle"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      custom-class="select-data-service-dialog"
      width="600px"
    >
      <el-scrollbar>
        <el-tree
          :default-expand-all="true"
          :props="dataServiceTreeProps"
          :data="dataServiceTreeData"
        >
          <span slot-scope="{ node, data }">
            <span v-if="!!data.serviceName">{{
              node.label
            }}</span>
            <el-radio
              v-else
              v-model="selectedDataServicePkid"
              :label="data.pkid"
              >{{ node.label }}</el-radio
            >
          </span>
        </el-tree>
      </el-scrollbar>
      <template #footer>
        <el-button
          @click="dialogVisibleDataServe = false"
          class="update"
          >取消
        </el-button>
        <el-button type="primary" @click="onConfigServe"
          >确定
        </el-button>
      </template>
    </el-dialog>

    <MountDialog
      :visible.sync="showMountDialog"
      :catalogName="treeActiveName"
      :pkid="editServicePkid"
      :modelValue="editServiceData"
      title="挂载服务"
      @confirm="handleSubmit"
    />
  </div>
</template>

<script>
import {
  treeUpdate,
  serviceQuery,
  statisticsAdd,
  statisticsQuery,
  treeBySpecialType,
  topicDefaultMove,
  topicDefaultList,
  serviceDefaultAdd,
  serviceDefaultDelete,
  serviceTopicAdd,
  serviceTopicDelete,
  checkServiceDelete
} from '@/api/tree'
import {
  treeByTypeId,
  catalogServiceUpdateSort,
  treeAdd,
  // treeUpdate,
  treeDelete,
  serviceAdd,
  serviceDelete
  // serviceQuery,
  // serveAdd,
  // serveEdit,
  // serveDelete,
  // statisticsAdd,
  // statisticsQuery,
  // treeBySpecialType,
  // topicDefaultMove,
  // topicDefaultList,
  // serviceDefaultAdd,
  // serviceDefaultDelete,
  // serviceTopicAdd,
  // serviceTopicDelete,
  // checkServiceDelete
} from '@/api/pad'
import {
  addDataService,
  retrieveDataServiceById,
  deleteDataService,
  updateDataService
} from '@/api/multiple-dataservice'
import Sortable from 'sortablejs'
import Icon from '@/components/icon'
import axios from 'axios'
import { isSame } from '@/utils/equal'
import { cloneDeep } from 'lodash'
import {
  mapQuery,
  mapBaseSpecialAdd,
  mapBaseSpecialDelete
} from '@/api/map'
import MountDialog from './components/mountDialog.vue'

export default {
  name: 'index',
  components: {
    Icon,
    MountDialog
    // Sortable
  },
  data() {
    return {
      typeList: [
        { name: '数据目录', type: '1', icon: 'shujumulu' }
        // {
        //   name: '专题类型',
        //   type: '2',
        //   icon: 'zhuantileixing'
        // }
      ],
      leftActiveType: '1',
      topicList: [
        { label: '城市全景', id: 'chengshiquanjing' },
        {
          label: '未来蓝图-总规',
          id: 'weilailantu-zonggui'
        },
        {
          label: '未来蓝图-控规',
          id: 'weilailantu-konggui'
        },
        { label: '数字孪生', id: 'shuziluansheng' },
        { label: '生长动态', id: 'shengzhangdongtai' },
        { label: '万物互联', id: 'wanwuhulian' },
        { label: '智慧规划', id: 'zhihuiguihua' }
      ],
      activeTopicId: 'chengshiquanjing',
      treeData: [],
      treeDataTopic: [],
      filterText: '',
      treeDataRight: [],
      topicChecked: [],
      treeActiveData: '',
      activeTree: {},
      treeActiveId: '',
      treeActiveName: '',
      defaultProps: {
        children: 'children',
        label: 'catalogName'
        // disabled: (_data, node) => {
        //   return this.loadingList.includes(node.key)
        // }
      },
      defaultPropsTopic: {
        children: 'children'
        // label: 'catalogName'
        // disabled: (_data, node) => {
        //   return this.loadingList.includes(node.key)
        // }
      },
      total: '',
      selectBaseMap: '',
      baseMapList: [],
      serveList: [],
      parameter: {
        pageSize: 10,
        pageIndex: 1,
        catalogId: '',
        serviceType: '',
        serviceName: '',
        showChart: ''
      },
      headerTreeTitle: '',
      headerServeTitle: '',
      deptTrees: [],
      add: true,
      addServe: true,
      treeForm: {
        catalogName: '',
        parentId: '',
        pidType: 0
      },
      emptyTreeForm: {
        name: '',
        parentId: ''
      },
      treeRules: {
        catalogName: [
          {
            required: true,
            message: '请输入目录名称',
            trigger: 'blur'
          }
        ],
        pidType: [
          {
            required: true,
            message: '请选择目录层级',
            trigger: 'change'
          }
        ]
      },
      emptyTreeRules: {
        catalogName: [
          {
            required: true,
            message: '请输入目录名称',
            trigger: 'blur'
          }
        ]
      },
      dialogVisibleTree: false,
      emptyDialogVisibleTree: false,
      specialWordOption: [],
      optionAll: {
        fields: [],
        fieldsList: [],
        four: [
          {
            label: '平均值',
            value: 0
          },
          {
            label: '计数',
            value: 1
          },
          {
            label: '求和',
            value: 2
          }
        ]
      },
      serveTypeList: [
        { key: '21', value: 'WMTS' },
        { key: '22', value: 'XYZ Tiles' },
        { key: '23', value: '矢量切片服务' },
        { key: '24', value: 'WMS' },
        { key: '25', value: 'ArcGIS Server' },
        { key: '26', value: 'SuperMap REST' },
        { key: '27', value: 'SuperMap RealSpace' }
      ],
      serveForm: {
        catalogId: '',
        catalogName: '',
        sourceName: '',
        serviceType: '',
        serviceUrl: '',
        signService: '',
        // dataService: '',
        showChart: '',
        aggFields: '',
        groupFields: '',
        types: '',
        specialType: '',
        specialWord: '',
        range: [],
        bimType: '',
        serviceName: '',
        codeField: '',
        dataServiceList: [],
        bim0: {
          serviceUrl: '',
          dataService: '',
          bimCode: '',
          bimDataFields: []
        },
        bim1: {
          serviceUrl: '',
          dataService: '',
          bimCode: '',
          bimDataFields: []
        },
        bim2: {
          serviceUrl: '',
          dataService: '',
          bimCode: '',
          bimDataFields: []
        },
        bim3: {
          serviceUrl: '',
          dataService: '',
          bimCode: '',
          bimDataFields: []
        }
      },
      serveRules: {
        sourceName: [
          {
            required: true,
            message: '请输入服务名称',
            trigger: 'blur'
          }
        ],
        serviceType: [
          {
            required: true,
            message: '请选择服务类型',
            trigger: 'change'
          }
        ],
        serviceUrl: [
          {
            required: true,
            message: '请输入服务地址',
            trigger: 'blur'
          }
        ],
        signService: [
          {
            required: true,
            message: '请输入图例服务地址',
            trigger: 'blur'
          }
        ],
        specialType: [
          {
            required: true,
            message: '请选择',
            trigger: 'change'
          }
        ],
        // dataService: [
        //   {
        //     required: false,
        //     message: '请输入数据服务地址',
        //     trigger: 'blur'
        //   }
        // ],
        specialWord: [
          {
            required: false,
            message: '请选择专题字段',
            trigger: 'change'
          }
        ],
        showChart: [
          {
            required: true,
            message: '请选择统计图表是否显示',
            trigger: 'change'
          }
        ],
        aggFields: [
          {
            required: false,
            message: '请选择统计指标',
            trigger: 'change'
          }
        ],
        groupFields: [
          {
            required: false,
            message: '请选择分类字段',
            trigger: 'change'
          }
        ],
        types: [
          {
            required: false,
            message: '请选择统计方式',
            trigger: 'change'
          }
        ],
        range: [
          {
            required: false,
            message: '请选择统计范围',
            trigger: 'change'
          }
        ],
        bimType: [
          {
            required: false,
            message: '请选择BIM类型',
            trigger: 'blur'
          }
        ],
        bim0: {
          serviceUrl: [
            {
              required: false,
              message: '请输入服务地址',
              trigger: 'blur'
            }
          ],
          dataService: [
            {
              required: false,
              message: '请输入数据服务地址',
              trigger: 'blur'
            }
          ],
          bimCode: [
            {
              required: false,
              message: '请选择数据编码字段',
              trigger: 'change'
            }
          ]
        },
        bim1: {
          serviceUrl: [
            {
              required: false,
              message: '请输入服务地址',
              trigger: 'blur'
            }
          ],
          dataService: [
            {
              required: false,
              message: '请输入数据服务地址',
              trigger: 'blur'
            }
          ],
          bimCode: [
            {
              required: false,
              message: '请选择数据编码字段',
              trigger: 'change'
            }
          ]
        },
        bim2: {
          serviceUrl: [
            {
              required: false,
              message: '请输入服务地址',
              trigger: 'blur'
            }
          ],
          dataService: [
            {
              required: false,
              message: '请输入数据服务地址',
              trigger: 'blur'
            }
          ],
          bimCode: [
            {
              required: false,
              message: '请选择数据编码字段',
              trigger: 'change'
            }
          ]
        },
        bim3: {
          serviceUrl: [
            {
              required: false,
              message: '请输入服务地址',
              trigger: 'blur'
            }
          ],
          dataService: [
            {
              required: false,
              message: '请输入数据服务地址',
              trigger: 'blur'
            }
          ],
          bimCode: [
            {
              required: false,
              message: '请选择数据编码字段',
              trigger: 'change'
            }
          ]
        }
      },
      dialogVisibleServe: false,
      bimServeTabName: 'bim0',
      bimTypeList: [
        { value: 1, label: '楼栋' },
        { value: 2, label: '管廊' },
        { value: 3, label: '其他' }
      ],
      specialTypeList: [
        { value: 1, label: '噪音监测' },
        { value: 2, label: '视频监控' },
        { value: 3, label: '无' }
      ],
      defaultList: [],
      activeTopicTree: '',
      topicCheckedList: [],
      dialogVisibleDataServe: false,
      dataServiceTreeProps: {
        children: 'resourceServiceDataInfoList'
      },
      dataServiceTreeData: [],
      selectedDataServicePkid: '',
      selectedDataService: '',
      // selectConfigData: '',
      editableTabsValue: '1',
      editableTabs: [],
      tabIndex: 0,
      tabActive: -1,
      dataServiceList: [],
      // 原始数据服务配置列表，编辑已有服务时使用
      originDataServiceList: [],
      toolData: [
        {
          label: '服务挂载',
          value: 'serve'
        },
        {
          label: '统计图表配置',
          value: 'chart'
        }
      ],
      activeTool: 'serve',
      getDataServiceList: [],
      serviceFormArr: [],
      showMountDialog: false,
      editServicePkid: '',
      editServiceData: {
        serviceName: '',
        serviceType: '',
        serviceUrl: '',
        dataUrl: ''
      }
    }
  },
  mounted() {
    this.getTreeData('5')
    this.activeTopicTree = ''
    if (localStorage.getItem('serverParams')) {
      this.parameter = JSON.parse(
        localStorage.getItem('serverParams')
      )
      this.treeActiveId = this.parameter.catalogId
      this.getServeList()
    }
    const route = this.$route.query
    if (route.treeActiveId) {
      this.treeActiveId = route.treeActiveId
      this.treeActiveName = route.treeActiveName
    }
    // this.getTreeData('2')
    // this.getTreeData('3')
    // this.getTreeDataTopic('5')
    // this.getTreeDataTopic('2')
    // this.getTreeDataTopic('3')
    // this.getTopicChecked()
    // this.rowDrag()
  },
  watch: {
    bimServeTabName(newVal) {
      this.serveForm[newVal].bimDataFields = []
      if (this.serveForm[newVal].dataService) {
        this.getBimDataFields()
      }
    },
    activeTopicId(val, oldVal) {
      console.log(val, oldVal)
    },
    filterText(val) {
      this.$refs.layerTree.filter(val)
    },
    'dataServeForm.serve'(val) {
      console.log('valll', val)
    }
  },
  methods: {
    async moveSort(row, direction) {
      if (this.loading) return
      this.loading = true
      try {
        const curIndex = row.index
        const nextIndex = row.index + direction
        const curPkid = row.pkid
        const nextPkid =
          this.serveList[row.index + direction].pkid
        const idList = this.serveList.map((e, index) => {
          let ret = e.pkid
          if (e.index == curIndex) {
            ret = nextPkid
          } else if (e.index == nextIndex) {
            ret = curPkid
          }
          return ret
        })
        await catalogServiceUpdateSort({ pkidList: idList })
        await this.getTreeData()
        this.loading = false
      } catch (error) {
        this.loading = false
      }
    },
    getBaseMapList() {
      mapQuery({ specialType: this.activeTopicId }).then(
        (res) => {
          console.log(res)
          // const list = [
          //   {pkid: 'none', name: '无底图'}
          // ]
          this.selectBaseMap = ''
          if (res.success) {
            this.baseMapList = res.data.list
            res.data.list.forEach((item) => {
              if (item.isDefault) {
                this.selectBaseMap = item.pkid
              }
            })
          } else {
            this.$message.error(res.message)
          }
        }
      )
    },
    folderIcon(node) {
      switch (node.pkid) {
        case '1':
          return 'xianzhuang'
        case '2':
          return 'guihua'
        case '3':
          return 'bim'
        default:
          return 'wenjianjia'
      }
    },
    getRightTree() {
      this.treeDataRight = []
      this.getTreeDataRight()
    },
    getTopicDefault() {
      topicDefaultList(this.activeTopicId).then((res) => {
        if (res.success) {
          console.log(res)
          this.defaultList = res.data
          this.getRightTree()
        }
      })
    },
    topicClick(item) {
      this.activeTopicId = item.id
      this.activeTopicTree = ''
      this.rowDrag()
      this.getTreeDataTopic('5')
      // this.getTopicChecked()
      this.defaultList = []
      this.getTopicDefault()
      this.getBaseMapList()
      // this.getRightTree()
      // this.getTopicData('5')
    },
    typeClick(item) {
      this.leftActiveType = item.type
      if (Number(item.type) === 2) {
        // this.rowDrag()
        this.getTreeDataTopic('5')
        // this.getTopicChecked()
        this.defaultList = []
        this.getTopicDefault()
        this.getBaseMapList()
        setTimeout(() => {
          this.rowDrag()
        }, 100)
        // this.topicClick(this.topicClick[0])
        //  this.getRightTree()
        // this.getTopicData(this.activeTopicId)
      } else {
        this.getTreeData('5')
        setTimeout(() => {
          this.rowDrag()
        }, 100)
        // this.onClick(this.activeTree)
        // this.rowDrag()
        this.activeTopicId = 'chengshiquanjing'
      }
    },
    /**
     * 获取字段数据
     *
     * @param isUpdateService 是否是更新服务
     */
    getFields(isUpdateService) {
      const defaultIndex = this.dataServiceList.findIndex(
        (item) => item.isDefault
      )
      if (
        this.serveForm.showChart &&
        (defaultIndex === -1 ||
          !this.dataServiceList[defaultIndex].url)
      ) {
        this.$message.error(
          '请配置数据服务地址并勾选默认统计服务'
        )
        return
      } else if (!this.serveForm.showChart) {
        return
      }
      axios
        .get(
          this.dataServiceList[defaultIndex].url +
            '/fields.json'
        )
        .then((res) => {
          const fieldList = res.data.fieldNames.map(
            (item, index) => {
              return {
                field: item,
                url: res.data.childUriList[index],
                caption: item
              }
            }
          )
          fieldList.forEach((item) => {
            axios
              .get(item.url + '.json')
              .then((jsonResult) => {
                item.caption =
                  jsonResult.data.fieldInfo.caption
              })
          })
          this.optionAll.fields = fieldList
          this.optionAll.fieldsList = fieldList
          if (isUpdateService) {
            this.serveForm.aggFields =
              this.serveForm.aggFields.map((agg) => {
                const find = fieldList.find(
                  (field) => field.field === agg
                )
                if (find) {
                  if (find.caption) {
                    return find.caption
                  } else {
                    return find.field
                  }
                }
              })
            this.serveForm.groupFields =
              this.serveForm.groupFields.map((group) => {
                return fieldList.find(
                  (field) => field.field === group
                ).caption
              })
          }
        })
        .catch(() => {
          // 请求失败的回调;
          this.$message.error('获取统计字段与分组字段失败')
        })
    },
    getBimDataFields() {
      if (
        !this.serveForm[this.bimServeTabName].dataService
      ) {
        this.$message.error(
          '请输入数据服务地址获取统计字段与分类字段'
        )
        return
      }
      axios
        .get(
          this.serveForm[this.bimServeTabName].dataService +
            '/fields.json',
          {}
        )
        .then((res) => {
          const fieldList = res.data.fieldNames.map(
            (item, index) => {
              return {
                field: item,
                url: res.data.childUriList[index],
                caption: item
              }
            }
          )
          fieldList.forEach((item) => {
            axios
              .get(item.url + '.json')
              .then((jsonResult) => {
                item.caption =
                  jsonResult.data.fieldInfo.caption
              })
          })
          this.serveForm[
            this.bimServeTabName
          ].bimDataFields = fieldList
          this.$forceUpdate()
        })
      // if(this.bimServeTabName==bim0){

      // }
    },
    specialTypeChange(val) {
      this.serveRules.specialWord[0].required = val !== 3
    },
    getSpecialFields(val) {
      if (val) {
        const defaultIndex = this.dataServiceList.findIndex(
          (item) => item.isDefault
        )
        this.specialWordOption = []
        if (
          defaultIndex === -1 ||
          !this.dataServiceList[defaultIndex].url
        ) {
          this.$message.error(
            '请配置数据服务地址并勾选默认统计服务'
          )
          return
        }

        axios
          .get(
            this.dataServiceList[defaultIndex].url +
              '/fields.json'
          )
          .then((res) => {
            const fieldList = res.data.fieldNames.map(
              (item, index) => {
                return {
                  field: item,
                  url: res.data.childUriList[index],
                  caption: item
                }
              }
            )
            fieldList.forEach((item) => {
              axios
                .get(item.url + '.json')
                .then((jsonResult) => {
                  item.caption =
                    jsonResult.data.fieldInfo.caption
                })
            })
            this.specialWordOption = fieldList
          })
          .catch(() => {
            // 请求失败的回调;
            this.$message.error(
              '获取统计字段与分组字段失败'
            )
          })
      }
    },
    // dataServiceChange() {
    //   this.serveForm.aggFields = ''
    //   this.optionAll.fields = []
    //   this.serveForm.groupFields = ''
    //   this.optionAll.fieldsList = []
    //   this.serveForm.types = ''
    // },
    search() {
      this.parameter.pageIndex = 1
      this.getServeList()
    },
    pageChange(page) {
      this.parameter.pageIndex = page
      this.getServeList()
    },
    showChartChange(e) {
      // 显示统计图表时下列项改为必填
      // this.serveRules.dataService[0].required = e === 1
      this.serveRules.aggFields[0].required = e === 1
      this.serveRules.groupFields[0].required = e === 1
      this.serveRules.types[0].required = e === 1

      if (this.addServe) {
        this.serveForm.aggFields = ''
        this.serveForm.groupFields = ''
        this.serveForm.types = ''
        this.optionAll.fields = []
        this.optionAll.fieldsList = []
        if (e) {
          this.getFields()
        }
      } else {
        if (e) {
          this.getFields()
          statisticsQuery({
            serviceId: this.serveForm.pkid
          }).then((res) => {
            if (res.success) {
              this.serveForm.aggFields = res.data.aggFields
              this.serveForm.groupFields =
                res.data.groupFields
              this.serveForm.types = res.data.types
            } else {
              this.$message.error(res.message)
            }
          })
        } else {
          this.serveForm.aggFields = ''
          this.serveForm.groupFields = ''
          this.serveForm.types = ''
        }
      }
    },
    onServiceTypeChange(e) {
      if (e) {
        if (e === '27') {
          // realspace类型
          this.serveRules.serviceUrl[0].required = false
          this.serveRules.bimType[0].required = true
        } else {
          // 非realspace类型
          this.serveRules.serviceUrl[0].required = true
          this.serveRules.bimType[0].required = false
        }
      }
    },
    getTreeData(type) {
      const params = 'service'
      treeByTypeId(params).then((res) => {
        if (res.success) {
          this.treeData = res.data
          try {
            const obj = this.treeData.find(
              (i) => i.pkid === this.treeActiveId
            )
            this.serveList = this.setServiceList(
              this.treeData,
              this.parameter.catalogId
            )

            this.serveList.forEach((e, i) => {
              e.index = i
            })

            if (obj) {
              throw obj
            }
          } catch (obj) {
            this.treeActiveName = obj.name
          }
        } else {
          this.$message.error(res.message)
        }
      })
    },
    setServiceList(treeData, targetPkid) {
      for (const node of treeData) {
        if (node.pkid === targetPkid) {
          return node.serviceInfos || null
        }
        if (node.children && node.children.length > 0) {
          const result = this.setServiceList(
            node.children,
            targetPkid
          )
          if (result) {
            return result
          }
        }
      }
      // this.treeData.forEach((item) => {
      //   if (item.children && item.children.length) {
      //       const service = item.children.find((i) => {
      //         return i.pkid === this.parameter.catalogId
      //       })
      //       if (service) {
      //         this.serveList = service.serviceInfos
      //       }
      //   }
      // })
    },
    getTreeDataTopic(type) {
      const params = 'service'
      treeByTypeId(params).then((res) => {
        if (res.success) {
          this.treeDataTopic = res.data
          this.addResourceInfo(this.treeDataTopic)
          // const find1 = this.treeDataTopic.find(
          //   (item) => item.pkid === type
          // )
          // if(find1){
          //   find1.children = res.data[0].children
          //   this.addResourceInfo(find1.children)
          // }
        } else {
          this.$message.error(res.message)
        }
      })
    },
    getTreeDataRight() {
      // this.treeDataRight=[]
      treeBySpecialType(this.activeTopicId).then((res) => {
        if (res.success && res.data.length) {
          this.treeDataRight = res.data[0].children
          this.addResourceInfoRight(this.treeDataRight)
        } else {
          this.$message.error(res.message)
        }
      })
    },
    addResourceInfo(data) {
      data.forEach((item) => {
        if (item.serviceInfos) {
          item.serviceInfos = item.serviceInfos.map(
            (item) => {
              item.isCheck = false
              const find = this.topicCheckedList.find(
                (e) => {
                  return e.pkid === item.pkid
                }
              )
              if (find) {
                item.isCheck = true
              }
              return item
            }
          )
          item.children = item.children.concat(
            item.resourceInfo
          )
        }
        if (item.children && item.children.length) {
          this.addResourceInfo(item.children)
        }
      })
    },
    addResourceInfoRight(data) {
      // data=data.filter(item=>{return item.resourceInfo.length})
      data.forEach((item) => {
        if (item.serviceInfos) {
          item.serviceInfos = item.serviceInfos.map(
            (item) => {
              item.isDefault = false
              const find = this.defaultList.find((e) => {
                return item && e.pkid === item.pkid
              })
              if (find) {
                item.isDefault = true
              }
              return item
            }
          )
          item.children = item.children.concat(
            item.resourceInfo
          )
        }
        if (item.children && item.children.length) {
          this.addResourceInfoRight(item.children)
        }
      })
    },
    // removeNode(list) {
    //   const list0 = this.$refs.layerTree.getCheckedKeys()
    //   const list1 = this.$refs.layerTree.getHalfCheckedKeys()
    //   const arr = list0.concat(list1)
    //   list.map((item) => {
    //     const find = arr.find((e) => {
    //       debugger
    //       return e == item.pkid
    //     })
    //     if (!find) {
    //       this.$refs.layerTreeRight.remove(item.pkid)
    //     }
    //     if (find && item.children) {
    //       this.removeNode(item.children)
    //     }
    //   })
    // },
    onClick(item) {
      this.rowDrag()
      this.serveList = []
      this.parameter.catalogId = item.pkid
      this.treeActiveId = item.pkid
      this.treeActiveName = item.name
      this.activeTree = item
      this.parameter.pageIndex = 1
      this.$nextTick(() => {
        this.$refs.tree.setCurrentKey(this.treeActiveId) // 一定要加这个选中了否则样式没有出来
      })
      localStorage.setItem(
        'serverParams',
        JSON.stringify(this.parameter)
      )
      this.getServeList()
      this.serveList = this.setServiceList(
        this.treeData,
        this.parameter.catalogId
      )

      this.serveList.forEach((e, i) => {
        e.index = i
      })
    },
    onClickTopic(item) {
      if (item.sourceName) {
        this.activeTopicTree = ''
        return
      }
      // console.log(item)
      this.activeTopicTree = item
      // this.treeActiveId = item.pkid
      // this.treeActiveName = item.catalogName
      this.$nextTick(() => {
        this.$refs.layerTreeRight.setCurrentKey(
          this.treeActiveId
        ) // 一定要加这个选中了否则样式没有出来
      })
    },
    // onClickAddData(data) {
    //   // console.log(data)
    //   // var list=[data]
    //   if (data.catalogName) {
    //   } else if (data.sourceName) {
    //     // if(data.isCheck){
    //     //   this.$message.warning('该服务已挂载到该专题目录！')
    //     //   return
    //     // }
    //     if (this.activeTopicTree) {
    //       // data.catalogId=this.activeTopicTree.pkid,
    //       var param = {
    //         catalogId: this.activeTopicTree.catalogName
    //           ? this.activeTopicTree.pkid
    //           : this.activeTopicTree.catalogId,
    //         serviceId: data.pkid
    //       }
    //       serviceTopicAdd(param).then((res) => {
    //         if (res.success) {
    //           this.$message.success('服务挂载成功')
    //           this.getTopicDefault()
    //         } else {
    //           this.$message.error(res.message)
    //         }
    //       })
    //     } else {
    //       this.$message.error('请选择专题服务目录挂载服务')
    //     }
    //     // else {
    //     //   // data.catalogId=this.treeDataRight[this.treeDataRight.length-1].pkid,
    //     //   var param = {
    //     //     catalogId: this.treeDataRight[this.treeDataRight.length - 1].pkid,
    //     //     serviceId: data.pkid
    //     //   }
    //     //   serviceTopicAdd(param).then(res => {
    //     //     if (res.success) {
    //     //       this.$message.success('服务挂载成功')
    //     //       this.getTopicDefault()
    //     //     }else {
    //     //       this.$message.error(res.message)
    //     //     }
    //     //   })
    //     // }
    //   }
    // },
    handleBaseMapChange(e, pkid) {
      if (e) {
        this.selectBaseMap = pkid
        mapBaseSpecialAdd({
          mapBaseId: pkid,
          specialType: this.activeTopicId
        }).then((res) => {
          if (res.success) {
            this.$message.success(res.data)
            this.getBaseMapList()
          } else {
            this.$message.error(res.message)
          }
        })
      } else {
        this.selectBaseMap = ''
        mapBaseSpecialDelete(pkid, this.activeTopicId).then(
          (res) => {
            if (res.success) {
              this.$message.success(res.data)
              this.getBaseMapList()
            } else {
              this.$message.error(res.message)
            }
          }
        )
      }
    },
    addTree(data) {
      this.headerTreeTitle = '新增目录'
      this.treeForm.catalogName = ''
      this.treeActiveData = data
      this.treeForm.parentId = data.pkid
      this.treeForm.pidType = 0
      this.deptTrees = JSON.parse(
        JSON.stringify(this.treeData)
      )
      this.dialogVisibleTree = true
      this.add = true
    },
    addTreeTopic(data) {
      this.headerTreeTitle = '新增目录'
      this.treeForm.catalogName = ''
      this.treeActiveData = data
      this.treeForm.parentId = data.pkid
      this.treeForm.pidType = 0
      if (this.activeTopicId === 'shengzhangdongtai') {
        this.treeForm.pidType = 1
      }
      this.deptTrees = JSON.parse(
        JSON.stringify(this.treeDataRight)
      )
      this.dialogVisibleTree = true
      this.add = true
    },
    addEmptyTree() {
      this.headerTreeTitle = '新增目录'
      this.emptyTreeForm.name = ''
      this.emptyDialogVisibleTree = true
      this.add = true
    },
    editTree(item) {
      this.headerTreeTitle = '编辑目录'
      this.treeActiveData = item
      this.treeForm.catalogName = item.name
      this.treeForm.parentId = item.parentId
      this.treeForm.pkid = item.pkid
      this.treeForm.pidType = 0
      this.deptTrees = JSON.parse(
        JSON.stringify(this.treeData)
      )
      this.dialogVisibleTree = true
      this.add = false
    },
    editTreeTopic(item) {
      this.headerTreeTitle = '编辑目录'
      this.treeActiveData = item
      this.treeForm.catalogName = item.catalogName
      this.treeForm.parentId = item.parentId
      this.treeForm.pkid = item.pkid
      this.treeForm.pidType = 0
      this.deptTrees = JSON.parse(
        JSON.stringify(this.treeDataRight)
      )
      this.dialogVisibleTree = true
      this.add = false
    },
    deleteTree(id) {
      this.$confirm(
        '此操作将永久删除该目录，是否继续?',
        '提示',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }
      ).then(() => {
        treeDelete(id).then((res) => {
          if (res.success) {
            this.dialogVisibleTree = false
            if (Number(this.leftActiveType) === 1) {
              this.getTreeData('5')
            } else {
              this.getRightTree()
            }
            this.$message.success(res.data)
          } else {
            this.$message.error(res.message)
          }
        })
      })
    },
    deleteTreeSource(data) {
      this.$confirm(
        '此操作将移除该服务的挂载，是否继续?',
        '提示',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }
      ).then(() => {
        const param = {
          catalogId: data.catalogId,
          serviceId: data.pkid
        }
        serviceTopicDelete(param).then((res) => {
          if (res.success) {
            this.$message.success('服务移除成功')
            this.getTopicDefault()
            // this.getTopicChecked()
          } else {
            this.$message.error(res.message)
          }
        })
      })
    },
    defaulfChange(data) {
      if (data.isDefault) {
        serviceDefaultAdd([
          {
            serviceId: data.pkid,
            specialType: this.activeTopicId
          }
        ]).then((res) => {
          if (res.success) {
            this.$message.success(res.data)
            this.getTopicDefault()
          } else {
            this.$message.error(res.message)
          }
        })
      } else {
        serviceDefaultDelete({
          serviceId: data.pkid,
          specialType: this.activeTopicId
        }).then((res) => {
          if (res.success) {
            this.$message.success(res.data)
            this.getTopicDefault()
          } else {
            this.$message.error(res.message)
          }
        })
      }
    },
    onServiceUrlChange(index) {
      switch (index) {
        case 0:
          this.$refs.ruleFormServe.clearValidate()
          break
        case 1:
          this.$refs.ruleFormServe.clearValidate()
          break
        case 2:
          this.$refs.ruleFormServe.clearValidate()
          break
        case 3:
          this.$refs.ruleFormServe.clearValidate()
          break
        default:
          break
      }
    },
    onDateServiceUrlChange(index) {
      switch (index) {
        case 0:
          this.serveRules.bim0.serviceUrl[0].required =
            !!this.serveForm.bim0.dataService
          this.$refs.ruleFormServe.clearValidate()
          break
        case 1:
          this.serveRules.bim1.serviceUrl[0].required =
            !!this.serveForm.bim1.dataService
          this.$refs.ruleFormServe.clearValidate()
          break
        case 2:
          this.serveRules.bim2.serviceUrl[0].required =
            !!this.serveForm.bim2.dataService
          this.$refs.ruleFormServe.clearValidate()
          break
        case 3:
          this.serveRules.bim3.serviceUrl[0].required =
            !!this.serveForm.bim3.dataService
          this.$refs.ruleFormServe.clearValidate()
          break
        default:
          break
      }
    },
    onSubmit(ruleForm) {
      this.$refs[ruleForm].validate((vaild) => {
        if (vaild) {
          const type = 'service'
          if (ruleForm === 'emptyRuleForm') {
            treeAdd({
              parentId:
                Number(this.leftActiveType) === 1
                  ? '5'
                  : this.activeTopicId,
              name: this.emptyTreeForm.name,
              type: type
            }).then((res) => {
              if (res.success) {
                this.emptyDialogVisibleTree = false
                if (Number(this.leftActiveType) === 1) {
                  this.getTreeData('5')
                } else {
                  this.getRightTree()
                }
                if (res.data) {
                  this.$message.success('新增目录成功')
                }
              } else {
                this.$message.error(res.message)
              }
            })
          } else {
            if (Array.isArray(this.treeForm.parentId)) {
              this.treeForm.parentId =
                this.treeForm.parentId[
                  this.treeForm.parentId.length - 1
                ]
            }
            if (this.add) {
              treeAdd({
                parentId: this.treeForm.pidType
                  ? this.treeActiveData.parentId
                  : this.treeForm.parentId,
                name: this.treeForm.catalogName,
                type: type
              }).then((res) => {
                if (res.success) {
                  this.dialogVisibleTree = false
                  if (Number(this.leftActiveType) === 1) {
                    this.getTreeData('5')
                  } else {
                    this.getRightTree()
                  }
                  if (res.data) {
                    this.$message.success('新增目录成功')
                  }
                } else {
                  this.$message.error(res.message)
                }
              })
            } else {
              treeAdd({
                parentId: this.treeForm.pidType
                  ? this.treeActiveData.parentId
                  : this.treeForm.parentId,
                name: this.treeForm.catalogName,
                type: type,
                pkid: this.treeForm.pkid
              }).then((res) => {
                if (res.success) {
                  this.dialogVisibleTree = false
                  if (Number(this.leftActiveType) === 1) {
                    this.getTreeData('5')
                  } else {
                    this.getRightTree()
                  }
                  this.$message.success(res.data)
                } else {
                  this.$message.error(res.message)
                }
              })
            }
          }
        }
      })
    },
    serveAdd() {
      this.headerServeTitle = '服务挂载'
      this.addServe = true
      if (!this.treeActiveId) {
        this.$message.warning(
          '请先选择数据目录，再挂载服务'
        )
        return
      }

      this.serveForm.catalogId = this.treeActiveId
      this.serveForm.catalogName = this.treeActiveName
      this.serveForm.specialType = ''
      this.serveForm.specialWord = ''
      this.serveForm.sourceName = ''
      this.serveForm.serviceUrl = ''
      this.serveForm.signService = ''
      this.serveForm.serviceName = ''
      this.serveForm.codeField = this.treeActiveName
      this.serveForm.dataServiceList = []
      // this.serveForm.dataService = ''
      this.serveForm.serviceType = ''
      this.serveForm.aggFields = ''
      this.serveForm.groupFields = ''
      this.serveForm.types = ''
      this.serveForm.showChart = 0
      this.serveForm.range = []
      this.serveForm.bimType = ''
      this.serveForm.bim0 = {
        serviceUrl: '',
        dataService: '',
        bimCode: '',
        bimDataFields: []
      }
      this.serveForm.bim1 = {
        serviceUrl: '',
        dataService: '',
        bimCode: '',
        bimDataFields: []
      }
      this.serveForm.bim2 = {
        serviceUrl: '',
        dataService: '',
        bimCode: '',
        bimDataFields: []
      }
      this.serveForm.bim3 = {
        serviceUrl: '',
        dataService: '',
        bimCode: '',
        bimDataFields: []
      }

      // this.dialogVisibleServe = true

      // this.editableTabs = [
      //   {
      //     title: '数据1',
      //     name: '1'
      //   }
      // ]
      // this.dataServiceList.push({
      //   name: '',
      //   url: '',
      //   isDefault: false
      // })
      this.serveRules.serviceUrl[0].required = true
      this.serveRules.showChart[0].required = true
      // this.dataServiceList = [
      //   {
      //     attributeWord: "",
      //     isDefault: true,
      //     name: "",
      //     pkid: "",
      //     serviceId: "",
      //     status: null,
      //     url: ""
      //   }
      // ]
      // if (this.dataServiceList.length) {
      //   for (
      //     let i = 0;
      //     i < this.dataServiceList.length;
      //     i++
      //   ) {
      //     this.editableTabs.push({
      //       title: `服务${i + 1}`,
      //       name: `${i + 1}`
      //     })
      //   }
      //   this.tabIndex = 1
      //   this.tabActive = 0
      // }
      this.$router.push({
        path: '/mochaITOM/catalogueManagement/serveMount',
        query: {
          catalogId: this.treeActiveId,
          catalogName: this.treeActiveName,
          addServe: 1,

          title: '服务挂载',
          serveForm: JSON.stringify(this.serveForm),
          serveRules: JSON.stringify(this.serveRules)
        }
      })
    },
    async updateServe(data) {
      this.showMountDialog = true
      this.editServicePkid = data.pkid
      this.editServiceData = data
      // this.catalogName = data.name
    },
    onConfigServe() {
      if (!this.selectedDataServicePkid) {
        this.$message('请先选择一项数据服务')
        return
      }
      try {
        this.dataServiceTreeData.forEach((serviceItem) => {
          if (
            serviceItem.resourceServiceDataInfoList &&
            serviceItem.resourceServiceDataInfoList.length
          ) {
            this.selectedDataService =
              serviceItem.resourceServiceDataInfoList.find(
                (dataServiceItem) =>
                  dataServiceItem.pkid ===
                  this.selectedDataServicePkid
              )
            if (this.selectedDataService) {
              throw new Error('')
            }
          }
        })
      } catch (e) {
        if (this.selectedDataService) {
          localStorage.setItem(
            'dataServiceInfo',
            JSON.stringify(this.selectedDataService)
          )
          this.$router.push({
            path: '/mochaITOM/catalogueManagement/catalogueAllocation'
          })
        }
      }
      if (!this.selectedDataService) {
        this.$message.error('数据错误')
      }
    },
    doDeleteServe(data) {
      this.$confirm(
        '此操作将永久删除该服务，是否继续?',
        '提示',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }
      ).then(() => {
        // console.log('data.pkid', data.pkid)
        serviceDelete(data.pkid).then((res) => {
          if (res.success) {
            this.$message.success(res.data)
            this.getTreeData()
          } else {
            this.$message.error(res.message)
          }
        })
      })
    },
    onSubmitServe(ruleForm) {
      this.$refs[ruleForm].validate((vaild) => {
        if (vaild) {
          // 手动校验多数据服务配置有效性
          if (
            this.serveForm.serviceType !== '27' &&
            this.dataServiceList.some(
              (item) => !item.name || !item.url
            )
          ) {
            this.$message.error(
              '数据服务名称和地址不能为空'
            )
            return
          }

          if (this.addServe) {
            if (this.serveForm.serviceType !== '27') {
              // 不是BIM数据
              serveAdd({
                catalogId: this.serveForm.catalogId,
                sourceName: this.serveForm.sourceName,
                serviceType: this.serveForm.serviceType,
                serviceUrl: this.serveForm.serviceUrl,
                signService: this.serveForm.signService,
                showChart: this.serveForm.showChart,
                // dataService: this.serveForm.dataService,
                specialType: this.serveForm.specialType,
                specialWord: this.serveForm.specialWord,
                areaAgg:
                  this.serveForm.range.indexOf('区域') !==
                  -1
                    ? 1
                    : 0,
                customAgg:
                  this.serveForm.range.indexOf('自定义') !==
                  -1
                    ? 1
                    : 0
              }).then((res) => {
                if (res.success) {
                  if (res.data) {
                    this.$message.success('新增目录成功')
                  }
                  const serviceId = res.data
                  if (this.serveForm.showChart) {
                    statisticsAdd({
                      serviceId: serviceId,
                      aggFields: this.serveForm.aggFields,
                      groupFields:
                        this.serveForm.groupFields,
                      types: this.serveForm.types
                    }).then((res) => {
                      if (res.success) {
                        addDataService([
                          ...this.dataServiceList.map(
                            (item) => {
                              return {
                                name: item.name,
                                serviceDataUrl: item.url,
                                isDefault: item.isDefault
                                  ? 1
                                  : 0,
                                serviceId: serviceId
                              }
                            }
                          )
                        ])
                          .then((res) => {
                            this.dialogVisibleServe = false
                            this.getServeList()
                            if (!res.success) {
                              this.$message.error(
                                res.message
                              )
                            }
                          })
                          .catch((err) => {
                            this.dialogVisibleServe = false
                            this.getServeList()
                            this.$message.error(err)
                          })
                      } else {
                        this.$message.error(res.message)
                      }
                    })
                  } else {
                    addDataService([
                      ...this.dataServiceList.map(
                        (item) => {
                          return {
                            name: item.name,
                            serviceDataUrl: item.url,
                            isDefault: item.isDefault
                              ? 1
                              : 0,
                            serviceId: serviceId
                          }
                        }
                      )
                    ])
                      .then((res) => {
                        this.dialogVisibleServe = false
                        this.getServeList()
                        if (!res.success) {
                          this.$message.error(res.message)
                        }
                      })
                      .catch((err) => {
                        this.dialogVisibleServe = false
                        this.getServeList()
                        this.$message.error(err)
                      })
                  }
                } else {
                  this.$message.error(res.message)
                }
              })
            } else {
              // 添加realspace服务
              delete this.serveForm.bim0.bimDataFields
              delete this.serveForm.bim1.bimDataFields
              delete this.serveForm.bim2.bimDataFields
              delete this.serveForm.bim3.bimDataFields
              serveAdd({
                catalogId: this.serveForm.catalogId,
                sourceName: this.serveForm.sourceName,
                signService: this.serveForm.signService,
                bimType: this.serveForm.bimType,
                serviceType: '27',
                serviceUrl: JSON.stringify([
                  this.serveForm.bim0,
                  this.serveForm.bim1,
                  this.serveForm.bim3,
                  this.serveForm.bim2
                ])
              }).then((res) => {
                if (res.success) {
                  if (res.data) {
                    this.$message.success('新增目录成功')
                  }
                  this.dialogVisibleServe = false
                  this.getServeList()
                } else {
                  this.$message.error(res.message)
                }
              })
            }
          } else {
            if (this.serveForm.serviceType !== '27') {
              // 不是BIM数据
              serveAdd(
                {
                  catalogId: this.serveForm.catalogId,
                  sourceName: this.serveForm.sourceName,
                  serviceType: this.serveForm.serviceType,
                  serviceUrl: this.serveForm.serviceUrl,
                  signService: this.serveForm.signService,
                  showChart: this.serveForm.showChart,
                  // dataService: this.serveForm.dataService,
                  specialType: this.serveForm.specialType,
                  specialWord: this.serveForm.specialWord,
                  areaAgg:
                    this.serveForm.range.indexOf('区域') !==
                    -1
                      ? 1
                      : 0,
                  customAgg:
                    this.serveForm.range.indexOf(
                      '自定义'
                    ) !== -1
                      ? 1
                      : 0
                },
                this.serveForm.pkid
              ).then(async (res) => {
                if (res.success) {
                  this.$message.success(res.data)
                  if (this.serveForm.showChart) {
                    statisticsAdd({
                      serviceId: this.serveForm.pkid,
                      aggFields: this.serveForm.aggFields,
                      groupFields:
                        this.serveForm.groupFields,
                      types: this.serveForm.types
                    }).then(async (res) => {
                      if (res.success) {
                        const updateItem = []
                        const newItem = []
                        for (const item of this
                          .dataServiceList) {
                          if (item.pkid) {
                            const origin =
                              this.originDataServiceList.find(
                                (a) => a.pkid === item.pkid
                              )
                            if (isSame(origin, item)) {
                              // console.log('不更新', item)
                            } else {
                              // console.log('更新', item)
                              updateItem.push(item)
                            }
                          } else {
                            // console.log('新增', item)
                            newItem.push(item)
                          }
                        }
                        if (updateItem.length) {
                          await updateDataService([
                            ...updateItem.map((item) => {
                              return {
                                attributeWord:
                                  item.attributeWord,
                                isDefault: item.isDefault
                                  ? 1
                                  : 0,
                                name: item.name,
                                pkid: item.pkid,
                                serviceId: item.serviceId,
                                status: item.status,
                                serviceDataUrl: item.url
                              }
                            })
                          ])
                            .then((res) => {
                              if (!res.success) {
                                this.$message.error(
                                  res.message
                                )
                              }
                            })
                            .catch((err) => {
                              this.$message.error(err)
                            })
                        }
                        if (newItem.length) {
                          await addDataService([
                            ...newItem.map((item) => {
                              return {
                                name: item.name,
                                serviceDataUrl: item.url,
                                isDefault: item.isDefault
                                  ? 1
                                  : 0,
                                serviceId:
                                  this.serveForm.pkid
                              }
                            })
                          ])
                            .then((res) => {
                              if (!res.success) {
                                this.$message.error(
                                  res.message
                                )
                              }
                            })
                            .catch((err) => {
                              this.$message.error(err)
                            })
                        }
                        this.dialogVisibleServe = false
                        this.getServeList()
                        // this.$message.success(res.data)
                      } else {
                        this.$message.error(res.message)
                      }
                    })
                  } else {
                    const updateItem = []
                    const newItem = []
                    for (const item of this
                      .dataServiceList) {
                      if (item.pkid) {
                        const origin =
                          this.originDataServiceList.find(
                            (a) => a.pkid === item.pkid
                          )
                        if (isSame(origin, item)) {
                          // console.log('不更新', item)
                        } else {
                          // console.log('更新', item)
                          updateItem.push(item)
                        }
                      } else {
                        // console.log('新增', item)
                        newItem.push(item)
                      }
                    }
                    if (updateItem.length) {
                      await updateDataService([
                        ...updateItem.map((item) => {
                          return {
                            attributeWord:
                              item.attributeWord,
                            isDefault: item.isDefault
                              ? 1
                              : 0,
                            name: item.name,
                            pkid: item.pkid,
                            serviceId: item.serviceId,
                            status: item.status,
                            serviceDataUrl: item.url
                          }
                        })
                      ])
                        .then((res) => {
                          if (!res.success) {
                            this.$message.error(res.message)
                          }
                        })
                        .catch((err) => {
                          this.$message.error(err)
                        })
                    }
                    if (newItem.length) {
                      await addDataService([
                        ...newItem.map((item) => {
                          return {
                            name: item.name,
                            serviceDataUrl: item.url,
                            isDefault: item.isDefault
                              ? 1
                              : 0,
                            serviceId: this.serveForm.pkid
                          }
                        })
                      ])
                        .then((res) => {
                          if (!res.success) {
                            this.$message.error(res.message)
                          }
                        })
                        .catch((err) => {
                          this.$message.error(err)
                        })
                    }
                    this.dialogVisibleServe = false
                    this.getServeList()
                  }
                } else {
                  this.$message.error(res.message)
                }
              })
            } else {
              delete this.serveForm.bim0.bimDataFields
              delete this.serveForm.bim1.bimDataFields
              delete this.serveForm.bim2.bimDataFields
              delete this.serveForm.bim3.bimDataFields
              serveEdit(
                {
                  catalogId: this.serveForm.catalogId,
                  sourceName: this.serveForm.sourceName,
                  signService: this.serveForm.signService,
                  bimType: this.serveForm.bimType,
                  serviceType: '27',
                  serviceUrl: JSON.stringify([
                    this.serveForm.bim0,
                    this.serveForm.bim1,
                    this.serveForm.bim2,
                    this.serveForm.bim3
                  ])
                },
                this.serveForm.pkid
              ).then((res) => {
                if (res.success) {
                  this.$message.success(res.data)
                  this.dialogVisibleServe = false
                  this.getServeList()
                } else {
                  this.$message.error(res.message)
                }
              })
            }
          }
        }
      })
    },
    getServeList() {
      // serviceQuery(this.parameter).then((res) => {
      //   if (res.success) {
      //     this.serveList = res.data.list || []
      //     this.total = res.data.count
      //   } else {
      //     this.$message.error(res.message)
      //   }
      // })
      // this.serveList = this.deptTrees.children.find((i) => i.pkid === this.parameter.catalogId).serviceInfos
    },
    getValueByKey(key) {
      const find = this.serveTypeList.find((item) => {
        return item.key === key
      })
      if (find) {
        return find.value
      } else {
        return ''
      }
    },
    handleDrop(draggingNode, dropNode, dropType, ev) {
      let param
      // console.log('tree drop: ', draggingNode, dropNode, dropType)
      if (draggingNode.data.catalogName) {
        if (dropType === 'after') {
          const data = draggingNode.data
          data.frontId = dropNode.data.pkid
          treeUpdate({ ...data }, data.pkid).then((res) => {
            if (res.success) {
              // if(this.leftActiveType==1){
              this.getTreeData('5')
              // }else{
              this.getRightTree()
              // }
              this.$message.success(res.data)
            } else {
              this.$message.error(res.message)
            }
          })
        } else if (dropType === 'before') {
          const data = draggingNode.data
          data.frontId = -1
          treeUpdate({ ...data }, data.pkid).then((res) => {
            if (res.success) {
              // if(this.leftActiveType==1){
              this.getTreeData('5')
              // }else{
              this.getRightTree()
              // }
              this.$message.success(res.data)
            } else {
              this.$message.error(res.message)
            }
          })
        }
      }
      if (draggingNode.data.sourceName) {
        if (dropType === 'after') {
          if (
            draggingNode.data.catalogId ===
            dropNode.data.catalogId
          ) {
            const data = draggingNode.data
            data.frontId = dropNode.data.pkid
            serveEdit({ ...data }, data.pkid).then(
              (res) => {
                console.log(res)
                if (res.success) {
                  this.getTreeDataTopic('5')
                  this.getRightTree()
                  this.$message.success(res.data)
                } else {
                  this.$message.error(res.message)
                }
              }
            )
          } else if (dropNode.data.catalogName) {
            param = {
              catalogId: dropNode.data.pkid,
              serviceId: draggingNode.data.pkid
            }
            serviceTopicAdd(param).then((res) => {
              if (res.success) {
                this.$message.success('服务挂载成功')
                this.getTopicDefault()
                this.getTreeDataTopic('5')
              } else {
                this.$message.error(res.message)
                this.getTopicDefault()
                this.getTreeDataTopic('5')
              }
            })
          } else if (dropNode.data.sourceName) {
            param = {
              catalogId: dropNode.data.catalogId,
              serviceId: draggingNode.data.pkid
            }
            serviceTopicAdd(param).then((res) => {
              if (res.success) {
                this.$message.success('服务挂载成功')
                this.getTopicDefault()
                this.getTreeDataTopic('5')
              } else {
                this.$message.error(res.message)
                this.getTopicDefault()
                this.getTreeDataTopic('5')
              }
            })
          }
        } else if (dropType === 'before') {
          const data = draggingNode.data
          data.frontId = -1
          serveEdit({ ...data }, data.pkid).then((res) => {
            console.log(res)
            if (res.success) {
              this.getTreeDataTopic('5')
              this.getRightTree()
              this.$message.success(res.data)
            } else {
              this.$message.error(res.message)
            }
          })
        }
      }
    },
    handleDragstart(node, event) {
      if (node.data.sourceName) {
        this.$refs.layerTreeRight.$emit(
          'tree-node-drag-start',
          event,
          { node: node }
        )
      }
    },
    handleDragend(draggingNode, endNode, position, event) {
      // 插入一个空节点用于占位
      const emptyData = { id: +new Date(), children: [] }
      // this.$refs.layerTreeData.insertBefore(emptyData, draggingNode);

      this.$refs.layerTreeRight.$emit(
        'tree-node-drag-end',
        event
      )
      this.$nextTick(() => {
        // 如果是移动到了当前树上，需要清掉空节点
        if (
          this.$refs.layerTreeData.getNode(
            draggingNode.data
          )
        ) {
          this.$refs.layerTreeData.remove(emptyData)
        } else {
          // 如果移动到了别的树上，需要恢复该节点，并清掉空节点
          const data = JSON.parse(
            JSON.stringify(draggingNode.data)
          )
          this.$refs.layerTreeData.insertAfter(
            data,
            this.$refs.layerTreeData.getNode(emptyData)
          )
          this.$refs.layerTreeData.remove(emptyData)
        }
      })
    },
    allowDrop(draggingNode, dropNode, type) {
      // console.log(this.checkTreeById(this.treeDataTopic,draggingNode.data.pkid))
      // console.log(draggingNode,dropNode)
      if (
        draggingNode.data.sourceName &&
        draggingNode.level === dropNode.level
      ) {
        if (
          draggingNode.data.catalogId ===
          dropNode.data.catalogId
        ) {
          if (Number(dropNode.data.orderIndex) === 0) {
            return type === 'prev' || type === 'next'
          } else {
            return type === 'next'
          }
        }
        // return false
      }
      if (
        draggingNode.data.catalogName &&
        draggingNode.level === dropNode.level
      ) {
        if (
          draggingNode.data.parentId ===
          dropNode.data.parentId
        ) {
          if (Number(dropNode.data.orderIndex) === 0) {
            return type === 'prev' || type === 'next'
          } else {
            return type === 'next'
          }
        }
        // else if(draggingNode.data.parentId==dropNode.data.parentId&&dropNode.data.pkid==dropNode.parent.childNodes[1].data.pkid){
        //   return type==='prev'
        // }
      } else {
        return false
      }
      // else if(draggingNode.level!=dropNode.level&&draggingNode.data.parentId===dropNode.data.pkid){
      //     return type == 'inner'
      // }
    },
    // ckeckTreeById(list, id) {
    //   let res = list.find((item) => item.id == id)
    //   if (res) {
    //     return res
    //   } else {
    //     for (let i = 0; i < list.length; i++) {
    //       if (
    //         list[i].children instanceof Array &&
    //         list[i].children.length > 0
    //       ) {
    //         res = this.ckeckTreeById(list[i].children, id)
    //         if (res) return res
    //       }
    //     }
    //     return null
    //   }
    // },
    platFn(list) {
      let res = []
      res = list.concat(
        ...list
          .map((item) => {
            if (
              item.children instanceof Array &&
              item.children.length > 0
            ) {
              return this.platFn(item.children)
            }
            return null
          })
          .filter((o) => o instanceof Array && o.length > 0)
      )
      return res
    },
    allowDropRight(draggingNode, dropNode, type) {
      if (draggingNode.data.sourceName) {
        const list = this.platFn(this.treeDataRight)
        const find = list.find((e) => {
          return e.pkid === draggingNode.data.catalogId
        })
        const index = this.treeDataRight.findIndex(
          (item) => {
            return (
              dropNode.data.catalogName &&
              item.pkid === dropNode.data.pkid
            )
          }
        )
        if (
          draggingNode.data.catalogId ===
          dropNode.data.catalogId
        ) {
          if (Number(dropNode.data.orderIndex) === 0) {
            return type === 'prev' || type === 'next'
          } else {
            return type === 'next'
          }
        } else if (find) {
          return false
        } else if (
          this.activeTopicId === 'shengzhangdongtai' &&
          index < 2 &&
          dropNode.data.catalogName &&
          dropNode.data.resourceInfo &&
          dropNode.data.resourceInfo.length
        ) {
          return false
        } else if (
          !find &&
          this.activeTopicId === 'shengzhangdongtai' &&
          dropNode.data.sourceName
        ) {
          return false
        } else {
          // this.$refs.layerTreeData.$emit('allow-drag', ()=>{
          //   return false
          // });
          return type === 'next'
        }
        // return false
      }
      if (
        draggingNode.data.catalogName &&
        draggingNode.level === dropNode.level
      ) {
        if (
          draggingNode.data.parentId ===
          dropNode.data.parentId
        ) {
          if (Number(dropNode.data.orderIndex) === 0) {
            return type === 'prev' || type === 'next'
          } else {
            return type === 'next'
          }
        }
        // else if(draggingNode.data.parentId==dropNode.data.parentId&&dropNode.data.pkid==dropNode.parent.childNodes[1].data.pkid){
        //   return type==='prev'
        // }
      } else {
        return false
      }
      // else if(draggingNode.level!=dropNode.level&&draggingNode.data.parentId===dropNode.data.pkid){
      //     return type == 'inner'
      // }
    },
    allowDrag() {
      return true
    },
    filterNode(value, data) {
      // console.log('filterNode', value, data)
      if (!value) return true
      if (data.sourceName) {
        return data.sourceName.indexOf(value) !== -1
      }
      if (data.catalogName) {
        return data.catalogName.indexOf(value) !== -1
      }
    },
    // filterNodeRight(value,data){
    //    console.log('filterNode', value, data)
    //   // if (!value) return true
    //   // if (data.sourceName) {
    //   //   return data.sourceName.indexOf(value) !== -1
    //   // }
    //   if(data.type&&data.resourceInfo==[]&&data.children==[]){
    //     return false
    //   }else{
    //     return true
    //   }
    // },
    tableRowClassName({ row, rowIndex }) {
      if (rowIndex % 2 === 1) {
        return 'light'
      } else {
        return ''
      }
    },
    rowDrag() {
      const el = document.querySelector(
        '.el-table__body-wrapper tbody'
      )
      const _this = this
      // console.log(el)
      Sortable.create(el, {
        onEnd({ newIndex, oldIndex }) {
          console.log(newIndex, oldIndex)
          if (newIndex === oldIndex) {
            return
          }
          if (Number(_this.leftActiveType) === 1) {
            const data = _this.serveList[oldIndex]
            if (newIndex === 0) {
              data.frontId = -1
            } else if (newIndex < oldIndex) {
              data.frontId =
                _this.serveList[newIndex - 1].pkid
            } else if (newIndex > oldIndex) {
              data.frontId = _this.serveList[newIndex].pkid
            }
            data.catalogId = _this.treeActiveId
            serveEdit({ ...data }, data.pkid).then(
              (res) => {
                console.log(res)
                if (res.success) {
                  _this.serveList = []
                  _this.getServeList()
                  _this.$message.success(res.data)
                } else {
                  _this.$message.error(res.message)
                }
              }
            )
          } else {
            const data1 = _this.defaultList[oldIndex]
            const param = {
              serviceId: data1.pkid,
              specialType: _this.activeTopicId,
              frontServiceId: ''
            }
            if (newIndex === 0) {
              param.frontServiceId = -1
            } else if (newIndex < oldIndex) {
              param.frontServiceId =
                _this.defaultList[newIndex - 1].pkid
            } else if (newIndex > oldIndex) {
              param.frontServiceId =
                _this.defaultList[newIndex].pkid
            }
            topicDefaultMove(param).then((res) => {
              if (res.success) {
                _this.defaultList = []
                _this.getTopicDefault()
                _this.$message.success(res.data)
              } else {
                _this.$message.error(res.message)
              }
            })
          }
        }
      })
    },
    handleTabsEdit(targetName, action) {
      // console.log(targetName, action)
      if (action === 'add') {
        // this.tabActive = this.tabIndex
        // console.log(this.tabActive)
        this.dataServiceList.push({
          name: '',
          url: '',
          isDefault: false
        })

        // const newTabName = ++this.tabIndex + ''
        this.tabIndex = this.tabIndex + 1
        const newTabName = this.editableTabs.length + 1 + ''
        this.editableTabs.push({
          title: '数据' + newTabName,
          name: newTabName
        })
        this.tabActive = this.editableTabs.length - 1
        this.editableTabsValue = newTabName
      }
      if (action === 'remove') {
        // 可以不设置数据服务地址，取消最少一条的限制
        // if (this.editableTabs.length === 1) {
        //   this.$message.error('必须保留一条数据！')
        //   this.tabIndex = 1
        //   return
        // }
        const indexPkid =
          this.dataServiceList[
            Number.parseInt(targetName) - 1
          ].pkid
        if (this.addServe || !indexPkid) {
          const removeIndex =
            Number.parseInt(targetName) - 1
          const tabs = this.editableTabs
          let activeName = this.editableTabsValue
          if (activeName === targetName) {
            tabs.forEach((tab, index) => {
              if (tab.name === targetName) {
                const nextTab =
                  tabs[index + 1] || tabs[index - 1]
                if (nextTab) {
                  activeName = nextTab.name
                }
              }
            })
          }
          this.editableTabs = tabs.filter(
            (tab) => tab.name !== targetName
          )
          this.editableTabs = this.editableTabs.map(
            (item, index) => {
              // console.log(index + 1)
              item.title = '数据' + (index + 1)
              item.name = (index + 1).toString()
              return item
            }
          )
          this.dataServiceList.splice(removeIndex, 1)
          this.tabIndex = this.editableTabs.length
          this.tabActive = this.tabIndex - 1
          this.editableTabsValue = this.tabIndex.toString()
        } else {
          this.$confirm(
            '此操作将永久删除该数据服务，是否继续?',
            '提示',
            {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
            }
          ).then(() => {
            const removeIndex =
              Number.parseInt(targetName) - 1
            deleteDataService([
              this.dataServiceList[removeIndex].pkid
            ])
              .then((res) => {
                console.log(res)
                if (res.success) {
                  this.$message.success('删除成功')
                  const tabs = this.editableTabs
                  let activeName = this.editableTabsValue
                  if (activeName === targetName) {
                    tabs.forEach((tab, index) => {
                      if (tab.name === targetName) {
                        const nextTab =
                          tabs[index + 1] || tabs[index - 1]
                        if (nextTab) {
                          activeName = nextTab.name
                        }
                      }
                    })
                  }
                  this.editableTabs = tabs.filter(
                    (tab) => tab.name !== targetName
                  )
                  this.editableTabs = this.editableTabs.map(
                    (item, index) => {
                      item.title = '数据' + (index + 1)
                      item.name = (index + 1).toString()
                      return item
                    }
                  )
                  this.dataServiceList.splice(
                    removeIndex,
                    1
                  )
                  this.originDataServiceList.splice(
                    removeIndex,
                    1
                  )
                  this.tabIndex = this.editableTabs.length
                  this.tabActive = this.tabIndex - 1
                  this.editableTabsValue =
                    this.tabIndex.toString()
                } else {
                  this.$message.warning(
                    res.message || '删除失败'
                  )
                }
              })
              .catch((err) => {
                this.$message.error(err)
              })
          })
        }
      }
    },
    handleTabClick(tab) {
      this.tabActive = Number.parseInt(tab.index)
    },
    multipleDataServiceDefaultChange(checked) {
      if (checked) {
        this.dataServiceList.forEach((item, index) => {
          item.isDefault = index === this.tabActive
        })
        this.getFields()
      } else {
        this.dataServiceList[
          this.tabActive
        ].isDefault = false
        this.optionAll.fields = []
        this.optionAll.fieldsList = []
      }
    },
    dialogClosed() {
      this.editableTabsValue = '1'
      this.editableTabs = []
      this.tabIndex = 0
      this.tabActive = -1
      this.dataServiceList.splice(
        0,
        this.dataServiceList.length
      )
      this.originDataServiceList.splice(
        0,
        this.originDataServiceList.length
      )
    },
    configClickHandleType(data) {
      const { value } = data
      this.activeTool =
        this.activeTool === value ? undefined : value
    },
    handleSubmit(data) {
      const params = {
        pkid: this.editServicePkid,
        serviceName: data.serviceName,
        catalogId: this.parameter.catalogId,
        serviceType: data.serviceType,
        serviceUrl: data.serviceUrl,
        dataUrl: data.dataUrl,
        orderIndex: this.editServicePkid
          ? data.orderIndex
          : this.serveList.length + 1
      }
      serviceAdd(params)
        .then((res) => {
          if (res.success) {
            this.$message.success(
              this.editServicePkid ? '编辑成功' : '挂载成功'
            )
            this.getTreeData('5')
          }
        })
        .catch((err) => {
          this.$message.error(err)
        })
    },
    mountServe() {
      this.showMountDialog = true
      this.editServicePkid = ''
      this.editServiceData = {
        serviceName: '',
        serviceType: '',
        serviceUrl: '',
        dataUrl: ''
      }
    }
  }
}
</script>

<style scoped lang="scss">
.body {
  width: calc(100% - 26px);
  height: calc(100% - 20px);
  margin: 10px 10px 10px 16px;
  background: #ffffff;
  box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.15);
  border-radius: 2px;

  ::v-deep.el-tree
    > .el-tree-node
    > .el-tree-node__content {
    padding-left: 8px !important;
  }

  ::v-deep.el-tree-node.is-current
    > .el-tree-node__content {
    background-color: #f2f6fb;
    color: #497fa3;
  }

  ::v-deep.el-tree-node__content {
    height: 36px;
    font-size: 14px;
    font-family: PingFang SC;
    // margin-top: 6px;
  }

  ::v-deep.el-tree-node__content:hover {
    background-color: #f2f6fb;
    color: #497fa3;
  }

  ::v-deep.light {
    background: #f9fcff;
    border: 1px solid #f2f6fb !important;
  }

  ::v-deep .el-tabs__item:focus.is-active {
    box-shadow: none !important;
  }

  // ::v-deep.el-button.update{
  //   background: #02a7f0;
  //   color: white !important;
  // }

  ::v-deep .el-dialog {
    // height: 400px;
    margin-top: -100px;

    &.select-data-service-dialog {
      min-height: 180px;
      max-height: 400px;

      .el-dialog__body {
        height: calc(100% - 110px);
        display: flex;

        .el-scrollbar {
          width: 100%;
          height: 100%;
        }
      }

      .el-dialog__footer {
        margin-top: 0;
      }
    }

    .el-dialog__header {
      background: #597182 !important;
      padding: 8px 0 14px 24px !important;
      height: 39px !important;

      .el-dialog__title {
        font-size: 16px !important;
        line-height: 22px;
        font-weight: 400 !important;
        color: white !important;
        //margin:19px 0 14px 24px !important;
      }

      .el-dialog__headerbtn {
        font-size: 16px;
        top: 10px !important;
        right: 17px !important;
        color: white !important;

        .el-dialog__close {
          color: white !important;
        }
      }
    }

    .el-dialog__body {
      padding: 17px 32px 18px 26px !important;
      // height: calc(100% - 150px);

      .el-form-item {
        margin-bottom: 19px !important;
      }
    }

    .el-dialog__footer {
      margin-top: 30px;
    }

    .el-select
      .el-select__tags
      + .el-input
      .el-input__inner {
      height: auto !important;
      background-color: #f6f9fc !important;
    }

    .el-input__inner {
      height: 34px !important;
      background-color: #f6f9fc !important;
    }

    .el-button--default {
      border-color: #497fa3 !important;

      span {
        color: #497fa3 !important;
      }
    }

    .el-button--primary {
      background: #497fa3 !important;
      border-color: white !important;
    }
  }

  ::v-deep .el-pagination {
    .active {
      background: #f6f9fc !important;
      color: #00baff !important;
    }

    button {
      border: 1px solid #ebf1f8 !important;
      background: white !important;
      color: #a7adb5 !important;
    }

    li {
      background: white !important;
      color: #00baff !important;
      border: 1px solid #ebf1f8;
      border-radius: 2px;
      font-weight: 400 !important;
      font-size: 12px !important;
      line-height: 25px !important;
    }
  }

  .body_left {
    width: 22%;
    height: 100%;
    background: white;
    padding: 15px 0;
    // margin-right: 10px;
    border: 1px solid #f2f6fb;
    box-shadow: 2px 0 8px 0 rgba(0, 0, 0, 0.05);

    .body_left_header {
      width: 100%;
      height: 45px;
      font-size: 16px;
      color: #4c565c;
      line-height: 33px;
      font-family: PingFang SC;

      .half {
        width: 50%;
        height: 100%;
        display: inline-block;
        text-align: center;
        cursor: pointer;

        :hover {
          color: #497fa3;
          font-weight: bold;
        }

        .iconfont {
          font-size: 16px;
          color: #4c565c;
        }

        &-active {
          // background-color: #497fa3;
          color: #497fa3;
          font-weight: bold;
        }

        span {
          margin-left: 6px;
        }
      }
    }

    .body_left_tab {
      width: 100%;
      height: 49px;
      background: #f2f6fb;
      border: 1px solid #f2f6fb;
      padding: 8px 5%;

      .tab_item {
        width: 33%;
        height: 100%;
        display: inline-block;
        text-align: center;
        cursor: pointer;
        font-size: 14px;
        color: #4c565c;
        font-family: PingFang SC;
        line-height: 31px;
        position: relative;
      }

      .tab_item:hover {
        color: #497fa3;
      }

      .tab_item:nth-child(3)::before {
        content: '|';
        display: inline-block;
        float: left;
        color: #d0d8e1;
      }

      .tab_item:nth-child(2)::before {
        content: '|';
        display: inline-block;
        float: left;
        color: #d0d8e1;
      }

      .tab_item_active {
        width: 33%;
        height: 100%;
        color: #497fa3;
        position: relative;
      }

      .tab_item_active::after {
        content: '';
        position: absolute;
        left: 38%;
        bottom: 0;
        width: 24%;
        height: 2px;
        background: #497fa3;
      }
    }

    .body_tree {
      width: 100%;
      height: calc(100% - 100px);
      padding-top: 6px;
      overflow: auto;

      .topic-item:hover {
        background: #497fa3;
        color: #ffffff;
      }

      .topic-item {
        width: 60%;
        margin-left: 20%;
        height: 40px;
        line-height: 40px;
        color: #497fa3;
        font-size: 16px;
        text-align: center;
        border: 1px #497fa3 solid;
        border-radius: 4px;
        margin-top: 20px;
        cursor: pointer;

        &-active {
          background: #497fa3;
          color: #ffffff;
        }
      }
    }
  }

  &_right {
    width: calc(78% - 3px);
    margin-left: 3px;
    background: white;
    padding: 15px 30px;

    .half {
      width: 30%;
      height: 100%;
      display: inline-block;
      vertical-align: middle;
      box-shadow: 2px 0 8px 0 rgba(0, 0, 0, 0.05);
      padding: 5px;
      // overflow: auto;
      .half-title {
        height: 40px;
        line-height: 40px;
        font-family: PingFang SC;
        padding-left: 12px;
        font-size: 16px;
        // border-bottom: 1px #4c565c solid;
      }

      .select {
        width: 80%;
        margin-left: 16px;
      }

      .radio {
        padding-top: 5px;
        margin-top: 3px;
        display: flex;
        justify-content: space-between;
        font-size: 14px;

        .label {
          padding-left: 12px;
        }
      }

      .half-body {
        height: calc(100% - 40px);
        overflow: auto;

        ::v-deep .el-table__row {
          .el-table__cell {
            padding: 8px !important;
            color: #4c565c;
          }
        }
      }
    }

    .body_right_header {
      width: 100%;
      height: 45px;
      font-family: PingFang SC;

      .el-button {
        background: #497fa3 !important;
        color: white !important;
        border: none !important;
        border-radius: 2px;
        padding: 8px 9px;
      }

      .header_right {
        float: right;
        display: inline-block;
        // width: 60%;
        height: 100%;
      }

      .header_right::v-deep {
        .el-input__inner {
          // background: #f6f9fc !important;
          color: #a7adb5 !important;
          height: 32px !important;
          width: 228px !important;

          .el-input__icon {
            width: 16px !important;
            height: 16px !important;
            font-size: 16px !important;
          }
        }

        .el-input__suffix {
          top: 1px !important;
          right: 8px !important;
        }

        .el-select {
          .el-input__inner {
            width: 170px !important;
            margin-left: 10px;
          }

          .el-input__suffix {
            top: 4px !important;
          }

          .is-focus {
            .el-input__suffix {
              top: -3px !important;
            }
          }
        }

        .el-cascader {
          top: -4px;

          .el-input__inner {
            width: 170px !important;
            margin-left: 10px;
          }
        }
      }
    }

    ::v-deep .el-table__row {
      .el-table__cell {
        padding: 0 !important;
        color: #4c565c;
      }
    }
  }
}

::v-deep {
  .el-tabs {
    // 居中
    //&__nav-scroll {
    //  width: 50%;
    //  margin: 0 auto;
    //}

    //&__header {
    //  margin-left: 20px;
    //}

    &__nav-wrap::after {
      position: static !important;
    }

    &__active-bar {
      background-color: #497fa3;
    }

    &__item {
      &.is-active {
        color: #497fa3;
      }

      &:not(:last-of-type) {
        &:after {
          content: '';
          height: 30%;
          width: 1px;
          position: absolute;
          right: 0;
          top: 35%;
          background-color: #d0d8e1;
        }
      }
    }
  }
}

.configType {
  &-title {
    display: flex;
    height: 33px;
    line-height: 33px;
    font-weight: 600;
    color: #ffffff;
    margin-bottom: 7px;

    > div {
      position: relative;
      margin-right: 20px;
      /*padding-bottom: 10px;*/
      cursor: pointer;
      font-size: 14px;
      // text-shadow: 0px 2px 2px #0C141D;
      background: #606266;
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;

      &:first-child {
        // margin-left: 10px;
      }
    }

    .is-active {
      background: rgb(0, 152, 255);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;

      &::after {
        content: '';
        position: absolute;
        left: 25%;
        bottom: 0;
        width: 50%;
        height: 2px;
        background: rgb(0, 152, 255);
      }
    }
  }
}

.dialog-line {
  width: 600px;
  height: 1px;
  border-top: 1px solid #d0d8e1;
  margin: 0 0 10px -25px;
}
</style>
